<template>
  <div>
    <el-card>
      <el-form>
        <el-form-item>
          <el-input v-model.trim="mic_name" placeholder="音频名称" style="width:148px;margin-bottom:10px"></el-input>
          <el-upload class="upload-demo" :data="{mic_name:this.mic_name}" :file-list="mic_url" style="width:380px" :action="uploadMic" :headers="headerObj" :on-success="upMicSuccess"
            :on-remove="upMicRemove" :limit="1">
            <el-button size="small" type="primary">上传音乐</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-table :data="micList" border>
        <el-table-column type="index" width="50" label="#">
        </el-table-column>
        <el-table-column label="日期" prop="create_time" width="260"></el-table-column>
        <el-table-column label="名称" prop="mic_name"></el-table-column>
        <el-table-column label="地址" prop="mic_url"></el-table-column>
        <el-table-column label="id" width="100" prop="id"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button type="danger" @click="deleteTap(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total='total' :page-size="queryInfo.pagesize" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getFileListApi, deleteFileApi } from '../../request/apis'
export default {
  data () {
    return {
      queryInfo: {
        pagenum: 1,
        type: 'mic',
        pagesize: 8
      },
      micList: [],
      total: 0,
      mic_name: '',
      mic_url: [],
      bgm: '',
      headerObj: {
        Authorization: 'Bearer ' + window.localStorage.getItem('access_token')
      },
      uploadMic: 'https://api.thunderup.cn/api/uploadmusic'
      // uploadMic: 'http://127.0.0.1:5000/api/uploadmusic'
    }
  },
  created () {
    this.getFileList()
  },
  methods: {
    async getFileList () {
      const { data, meta } = await getFileListApi(this.queryInfo)
      if (meta.status === 200) {
        this.micList = data.mics
        this.total = data.total
      }
    },
    handleCurrentChange () {
      this.getFileList()
    },
    async deleteTap (id) {
      const params = {
        id,
        type: 'mic'
      }
      const { meta } = await deleteFileApi(params)
      if (meta.status === 200) {
        this.$message.success('删除成功')
        this.getFileList()
      } else {
        this.$message.error('删除失败')
      }
    },
    upMicSuccess (response, file, fileList) {
      if (response.meta.status === 200) {
        this.bgm = response.data.file_url
        this.getFileList()
        this.upMicRemove()
      } else {
        this.$message.error('上传文件失败')
      }
    },
    upMicRemove () {
      this.bgm = ''
      this.mic_url = []
      this.mic_name = ''
    }
  }
}
</script>

<style>
</style>
